﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery ComboBox, DropDownList, List, ListBox, Popup List, jqxDropDownList, jqxComboBox, jqxListBox, List Widget, ListBox Widget, DropDownList Widget" />
    <meta name="description" content="The jqxComboBox represents a widget that contains a list of
        selectable items displayed in a drop-down. Users can enter information in the text box portion and search for a specific item. The widget comes with built-in auto-complete support.
        jqxComboBox has built-in auto complete functionality which enables users to quickly find and select from a pre-populated list of values as they type." />
    <title id='Description'>jqxComboBox has built-in auto complete functionality which enables users to quickly find and select from a pre-populated list of values as they type.
    </title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>    <script type="text/javascript" src="../../scripts/demos.js"></script>

    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxexpander.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {                
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
                    "Caffé macchiato",
                    "Café mélange",
                    "Coffee milk",
                    "Cafe mocha",
                    "Cappuccino",
                    "Carajillo",
                    "Cortado",
                    "Cuban espresso",
                    "Espresso",
                    "Eiskaffee",
                    "The Flat White",
                    "Frappuccino",
                    "Galao",
                    "Greek frappé coffee",
                    "Iced Coffee",
                    "Indian filter coffee",
                    "Instant coffee",
                    "Irish coffee",
                    "Liqueur coffee"
		        ];

                // Create a jqxComboBox
                $("#jqxComboBox").jqxComboBox({ source: source, selectedIndex: 0, width: '200', height: '25'});
                // Create a jqxDropDownList

                var source = [
                    "Starts with",
		            "Starts with(Case Sensitive)",
		            "Ends with",
		            "Ends with(Case Sensitive)",
		            "Contains",
		            "Contains(Case Sensitive)",
		            "Equal",
		            "Equal(Case Sensitive)",
		        ];

                $("#jqxDropDownList").jqxDropDownList({ source: source, selectedIndex: 0, width: '200', height: '25'});
                $('#AutoComplete').jqxCheckBox({ width: '120px'});
                $('#Enabled').jqxCheckBox({ checked: true, width: '120px'});
                $('#Open').jqxButton({ width: 80});
                $('#Close').jqxButton({ width: 80});
                $('#Settings').jqxExpander({width: 220, showArrow: false, toggleMode: 'none'});
                $('#Open').mousedown(function () {
                    // show popup.
                    $("#jqxComboBox").jqxComboBox('open');
                    return false;
                });

                $('#Close').mousedown(function () {
                    // hide popup.
                    $("#jqxComboBox").jqxComboBox('close');
                    return false;
                });

                $('#Enabled').on('change', function (event) {
                    // enable or disable.
                    var checked = !event.args.checked;
                    $("#jqxComboBox").jqxComboBox({ disabled: checked });
                });

                $('#AutoComplete').on('change', function (event) {
                    // set autocomplete property.
                    var checked = event.args.checked;
                    $("#jqxComboBox").jqxComboBox({ autoComplete: checked });
                });

                $("#jqxDropDownList").on('select', function (event) {
                    // set search mode.
                    var searchType = '';
                    switch (event.args.index) {
                        case 0:
                            searchType = 'startswithignorecase';
                            break;
                        case 1:
                            searchType = 'startswith';
                            break;
                        case 2:
                            searchType = 'endswithignorecase';
                            break;
                        case 3:
                            searchType = 'endswith';
                            break;
                        case 4:
                            searchType = 'containsignorecase';
                            break;
                        case 5:
                            searchType = 'contains';
                            break;
                        case 6:
                            searchType = 'equalsignorecase';
                            break;
                        case 7:
                            searchType = 'equals';
                            break;
                    }
                    $("#jqxComboBox").jqxComboBox({ searchMode: searchType });
                });
            });
        </script>
        <div id='jqxWidget'>
            <div style='float: left;'>
                <div style='float: left; margin-top: 10px;' id='jqxComboBox'>
                </div>
                <div id='Settings' style='float: left; margin-left: 100px; margin-top: 10px;'>
                    <div>
                        <div>Settings</div></div>
                    <div>
                        <div style="padding: 10px;">
                        <span>Search Type:</span>
                        <div style='margin-top: 10px;' id='jqxDropDownList'>
                        </div>
                        <div style='margin-top: 10px;'>
                            <input type="button" value="Open" id='Open' />
                            <input type="button" value="Close" id='Close' />
                        </div>
                        <div>
                            <div style='margin-top: 10px;' id='AutoComplete'>
                                Auto complete</div>
                            <div style='margin-top: 10px;' id='Enabled'>
                                Enabled</div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
